<template>
  <div>
    <el-menu
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      :unique-opened="true"
      :collapse-transition="true"
      @select="handleSelect"
      :default-active="defaultActive"
    >
      <el-submenu index="PROJECT">
        <template slot="title">
          <span>项目</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="1-1">选项1</el-menu-item>
          <el-menu-item index="1-2">选项2</el-menu-item>
          <el-menu-item index="1-3">选项3</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="SWICHBOARD">
        <template slot="title">
          <span>交换机</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="2-1">选项1</el-menu-item>
          <el-menu-item index="2-2">选项2</el-menu-item>
          <el-menu-item index="2-3">选项2</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="SERVER">
        <template slot="title">
          <span>服务器</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="3-1">选项1</el-menu-item>
          <el-menu-item index="3-2">选项2</el-menu-item>
          <el-menu-item index="3-3">选项2</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="SAN-SWICHBOARD">
        <template slot="title">
          <span>SAN交换机</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="4-1">选项1</el-menu-item>
          <el-menu-item index="4-2">选项2</el-menu-item>
          <el-menu-item index="4-3">选项2</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="STOEAGE">
        <template slot="title">
          <span>存储</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="5-1">选项1</el-menu-item>
          <el-menu-item index="5-2">选项2</el-menu-item>
          <el-menu-item index="5-3">选项2</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
export default {
  created(){
    this.defaultActive = this.$route.params.id
  },
  data(){
    return {
      defaultActive:''
    }
  },
  methods: {
    handleSelect(index, indexPath) {
      this.$router.push({
        name: "TopologyDiagramView",
        params: {
          id: indexPath[1],
          name:indexPath[0] ,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>
